<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>多列布局</title>
    <style>
        div {
            width: 1000px;
            margin: 0 auto;
            
            /* column-count: 3; */
            column-width: 220px;
            
            column-gap: 20px;

            /* column-rule-width: 2px;
            column-rule-style: dashed;
            column-rule-color: red; */

            column-rule: 2px dashed  red;
        }

        h1 {
            column-span: all;
            text-align: center;
            font-size: 50px;
        }
        img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div>
        <h1>《震惊！我好笨》</h1>
        <p> ipsum dolor sit amet consectetur,
        adipisicing elit. Voluptatum doloremque
        doloribus fugit nemo officia delectus
        officiis quos et, cum qui, labore obcaecati maxime veritatis. Tempora asperiores corporis quos consectetur ipsa
        magni, ratione dolorem harum facere hic ab veniam exercitationem impedit mollitia omnis reprehenderit at nisi.
        Fugiat, alias aliquam? Provident id dolore quaerat impedit neque magni, placeat, distinctio nostrum atque et
        beatae temporibus repudiandae non unde laboriosam, cumque sequi aliquam. Sed, culpa in architecto dolor
        distinctio consequatur iste aliquid facere, tenetur qui aspernatur dolorem tempore ipsum, id laborum
        perspiciatis repellendus maiores? Explicabo, est ut, consequuntur dignissimos exercitationem ex minima vero
        cumque tempore, et quos molestias rerum? Explicabo assumenda, laboriosam voluptatem error, asperiores vel nulla
        </p>
       <img src="../11_过渡/喜羊羊.jpg" alt="喜羊羊">
       <p>sapiente necessitatibus eos deserunt animi blanditiis cupiditate illum velit inventore ut qui quae maxime veniam
        minima? Quas accusamus eum at minima nobis neque assumenda velit, earum nemo voluptatibus ducimus nisi ea
        corporis vero ullam natus rerum impedit iusto voluptatem, molestiae sint delectus labore. Debitis consectetur
        quaerat repellendus, dicta a asperiores illo repudiandae et ipsa esse. Repudiandae magni laboriosam provident
        dignissimos exercitationem facilis expedita, quo saepe officia id. Necessitatibus, repudiandae porro saepe
        nostrum obcaecati omnis vitae ut adipisci corporis reprehenderit deserunt? Beatae dolorem ullam rerum officia
        iure tempore, earum labore veniam ratione vero ab fugit harum odio eveniet eius vitae et neque magni consectetur
        adipisci. Repudiandae qui porro, inventore laudantium eius obcaecati praesentium adipisci! Repellat aliquam
        aperiam minus exercitationem necessitatibus fugit quas sequi dolor nulla. Similique aut necessitatibus, hic
        laudantium repellendus, accusamus nesciunt nihil, accusantium expedita voluptatem dicta commodi debitis beatae.
        Quibusdam quae nam sapiente eaque optio voluptatibus quia quasi, doloribus inventore ad iure facere dolore,
        libero maiores commodi vero voluptates dolores exercitationem distinctio deserunt. Voluptatem eaque excepturi
        perspiciatis optio?</p>
    </div>
</body>

</html>